<!-- 首页导航栏 -->
<template>
    <div class="index-navbar">
      <div class="inner-navbar navbar-border">
        <router-link to="/stores/1">  <!-- 跳转地址 -->
          <div class="icon1"></div>
          <p>门店地址</p>
        </router-link>
      </div>
      <div class="inner-navbar">
        <router-link to="#">
          <div class="icon2"></div>
          <p>模拟考试</p>
        </router-link>
      </div>
      <div class="inner-navbar">
        <router-link to="/notice">
          <div class="icon3"></div>
          <p>学车须知</p>
        </router-link>
      </div>
    </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /*主要文字 黑 main-fn
  次要文字 灰 se-fn
  预填文字 灰 pre-fn
  描边 灰 border 
  背景 灰白 bg 
  主题 红 theme
  辅助 蓝 assist
  背景 白 bg-white */

  .index-navbar
    padding: 0 20px
    height: 90px
    border-1px($border)
    background-color: rgb(255,255,255)
    display: flex
    .inner-navbar
      width: 33.33% /* 百分比由导航栏数量决定 */
      height: 55px
      text-align: center
      margin-top: 17px
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      border-left: 1px solid $border
      p
        font-size: 15px
        margin-top: 11px
        color: $main-fn
      /* 每增加一项新的导航，就要为其新开一个class */
      a 
        display inline-block
      .icon1
        rectangle-icon(white,32px,30px)
        bg-image('mddz')
        margin: 0 auto
      .icon2
        rectangle-icon(white,25px,30px)
        bg-image('mnks')
        margin: 0 auto
      .icon3
        rectangle-icon(white,26px,30px)
        bg-image('xclc')
        margin: 0 auto
    .navbar-border
      border: none
</style>